<template>
  <div class="dashboard">
    <h1 class="page-title">
      <el-icon><House /></el-icon>
      学习概览
    </h1>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-number">{{ stats.currentDay }}</div>
          <div class="stat-label">当前学习天数</div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
          <div class="stat-number">{{ stats.totalProgress }}%</div>
          <div class="stat-label">总体进度</div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
          <div class="stat-number">{{ stats.checkinStreak }}</div>
          <div class="stat-label">连续打卡</div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
          <div class="stat-number">{{ stats.completedTasks }}</div>
          <div class="stat-label">已完成任务</div>
        </div>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="content-row">
      <!-- 学习进度 -->
      <el-col :xs="24" :lg="12">
        <el-card class="card" header="学习进度">
          <div class="progress-section">
            <div class="progress-item" v-for="stage in learningStages" :key="stage.id">
              <div class="progress-header">
                <span class="progress-title">{{ stage.name }}</span>
                <span class="progress-percentage">{{ stage.progress }}%</span>
              </div>
              <el-progress 
                :percentage="stage.progress" 
                :color="stage.color"
                :stroke-width="8"
              />
            </div>
          </div>
          <div style="margin-top: 20px;">
            <el-button type="primary" @click="$router.push('/progress')">
              查看详细进度
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 今日任务 -->
      <el-col :xs="24" :lg="12">
        <el-card class="card" header="今日任务">
          <div class="today-tasks">
            <div class="task-item" v-for="task in todayTasks" :key="task.id">
              <el-checkbox 
                v-model="task.completed" 
                @change="toggleTask(task)"
                :disabled="task.completed"
              >
                <span :class="{ 'completed-task': task.completed }">
                  {{ task.title }}
                </span>
              </el-checkbox>
              <div class="task-description">{{ task.description }}</div>
            </div>
          </div>
          <div style="margin-top: 20px;">
            <el-button type="success" @click="$router.push('/checkin')">
              完成打卡
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-row :gutter="20" class="action-row">
      <el-col :xs="24">
        <el-card class="card" header="快速操作">
          <div class="quick-actions">
            <el-button 
              v-for="action in quickActions" 
              :key="action.id"
              :type="action.type"
              :icon="action.icon"
              @click="$router.push(action.path)"
              class="action-btn"
            >
              {{ action.label }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 统计数据
const stats = ref({
  currentDay: 1,
  totalProgress: 5,
  checkinStreak: 0,
  completedTasks: 0
})

// 学习阶段
const learningStages = ref([
  {
    id: 1,
    name: 'Web 技术基础',
    progress: 10,
    color: '#409eff'
  },
  {
    id: 2,
    name: 'C# 编程基础',
    progress: 0,
    color: '#67c23a'
  },
  {
    id: 3,
    name: 'Vue.js 框架',
    progress: 0,
    color: '#e6a23c'
  },
  {
    id: 4,
    name: '浏览器自动化',
    progress: 0,
    color: '#f56c6c'
  }
])

// 今日任务
const todayTasks = ref([
  {
    id: 1,
    title: 'HTML 入门：学习标签和结构',
    description: '学习HTML基本标签，创建简单页面结构',
    completed: false
  },
  {
    id: 2,
    title: '创建个人介绍页面',
    description: '使用HTML标签制作一个简单的个人介绍页面',
    completed: false
  },
  {
    id: 3,
    title: '完成今日学习总结',
    description: '记录今天的学习心得和遇到的问题',
    completed: false
  }
])

// 快速操作
const quickActions = ref([
  {
    id: 1,
    label: '学习进度',
    icon: 'DataLine',
    type: 'primary',
    path: '/progress'
  },
  {
    id: 2,
    label: '每日打卡',
    icon: 'Calendar',
    type: 'success',
    path: '/checkin'
  },
  {
    id: 3,
    label: '学习资源',
    icon: 'Reading',
    type: 'warning',
    path: '/resources'
  }
])

// 切换任务状态
const toggleTask = (task) => {
  if (task.completed) {
    ElMessage.success(`已完成任务：${task.title}`)
    updateStats()
  }
}

// 更新统计数据
const updateStats = () => {
  const completedCount = todayTasks.value.filter(task => task.completed).length
  stats.value.completedTasks = completedCount
  
  // 计算总体进度
  const totalTasks = todayTasks.value.length
  const progress = Math.round((completedCount / totalTasks) * 100 / 4) // 假设每天的任务占总进度的1/4
  stats.value.totalProgress = Math.max(progress, 5) // 最少显示5%
}

// 初始化
onMounted(() => {
  // 模拟加载用户数据
  const savedProgress = localStorage.getItem('userProgress')
  if (savedProgress) {
    const progress = JSON.parse(savedProgress)
    stats.value = { ...stats.value, ...progress }
  }
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

/* 通用样式类 */
.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
}

.page-title .el-icon {
  margin-right: 12px;
  color: #409eff;
  font-size: 28px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #409eff;
}

/* 原有样式 */
.stats-row {
  margin-bottom: 20px;
}

.content-row {
  margin-bottom: 20px;
}

.action-row {
  margin-bottom: 20px;
}

.progress-section {
  margin-bottom: 16px;
}

.today-tasks {
  margin-bottom: 16px;
}

.task-item {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;
}

.task-item:hover {
  border-color: #409eff;
  background-color: #f8f9fa;
}

.task-description {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
  margin-left: 24px;
}

.completed-task {
  text-decoration: line-through;
  color: #909399;
}

.quick-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  min-width: 120px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-title {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .page-title .el-icon {
    font-size: 24px;
  }
  
  .stats-row .el-col {
    margin-bottom: 10px;
  }
  
  .content-row .el-col {
    margin-bottom: 20px;
  }
  
  .quick-actions {
    flex-direction: column;
  }
  
  .action-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .dashboard {
    padding: 0 10px;
  }
  
  .page-title {
    font-size: 18px;
  }
  
  .page-title .el-icon {
    font-size: 22px;
  }
  
  .task-item {
    padding: 10px;
  }
  
  .action-btn {
    min-width: auto;
  }
}
</style> 